<script setup>
import { ref, watch } from "vue";
import { ElMessage } from "element-plus";
import { useUserStore } from "@/stores/user/index.js";
import router from "@/router";

const userStore = useUserStore();
// 表单数据
const formData = ref({
  username: "",
  phone: "",
  password: "",
  qpwd: "",
});

// 表单校验规则
const rules = ref({
  username: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
  phone: [
    { required: true, message: "手机号不能为空", trigger: "blur" },
    {
      pattern: /^1[3-9]\d{9}$/,
      message: "请输入正确的手机号",
      trigger: "blur",
    },
  ],
  password: [
    { required: true, message: "密码不能为空", trigger: "blur" },
    { min: 6, max: 20, message: "密码长度为6-20位", trigger: "blur" },
  ],
  qpwd: [
    { required: true, message: "确认密码不能为空", trigger: "blur" },
    {
      validator: (rule, value, callback) => {
        if (value !== formData.value.password) {
          callback(new Error("两次输入密码不一致"));
        } else {
          callback();
        }
      },
      trigger: "blur",
    },
  ],
});

// 表单引用
const formRef = ref(null);

//随机头像数组
const picArr = [1, 2, 3, 4, 5, 6, 7, 8, 9];

// 提交表单
const handleSubmit = () => {
  let radomPic = Math.floor(Math.random() * picArr.length + 1);
  console.log(formData.value);
  console.log(radomPic);
  let userArr = {
    username: formData.value.username,
    phone: formData.value.phone,
    password: formData.value.password,
    img: `/src/assets/images/avatars/${radomPic}.png`,
    introduce: "",
    name: "",
  };

  formRef.value.validate((valid) => {
    if (valid) {
      userStore.regUser(userArr);
      watch(
        () => userStore.isReg,
        (newVal) => {
          if (newVal) {
            router.push("/login");
          }
        }
      );
    } else {
      ElMessage({
        message: "请完善表单信息！",
        type: "error",
        duration: 1000,
      });
    }
  });
};
</script>

<template>
  <div class="login">
    <el-form
      ref="formRef"
      :model="formData"
      :rules="rules"
      label-width="0"
      class="context"
    >
      <div class="left"></div>
      <div class="right">
        <span class="logo">YTDD</span>
        <span class="title">注册账户 ✨</span>

        <el-form-item prop="username">
          <label for="username">用户名</label>
          <el-input
            v-model="formData.username"
            style="width: calc(75vw * 35%)"
            size="large"
            placeholder="请输入你的用户名"
            id="username"
            class="my_input"
          />
        </el-form-item>
        <el-form-item prop="phone">
          <label for="phone">手机号</label>
          <el-input
            v-model.number="formData.phone"
            style="width: calc(75vw * 35%)"
            size="large"
            placeholder="请输入你的手机号"
            id="phone"
            class="my_input"
          />
        </el-form-item>

        <el-form-item prop="password">
          <label for="password">密码</label>
          <el-input
            v-model="formData.password"
            style="width: calc(75vw * 35%)"
            type="password"
            placeholder="请输入密码"
            show-password
            size="large"
            id="password"
            class="my_input"
          />
        </el-form-item>

        <el-form-item prop="qpwd">
          <label for="qpwd">确认密码</label>
          <el-input
            v-model="formData.qpwd"
            style="width: calc(75vw * 35%)"
            type="password"
            placeholder="请再次输入密码"
            show-password
            size="large"
            id="qpwd"
            class="my_input"
             @keyup.enter="handleSubmit"
          />
        </el-form-item>

        <el-form-item>
          <el-button
            color="#a0adf1"
            style="color: #fff; height: 45px"
            @click="handleSubmit"
            >注册账户</el-button
          >
        </el-form-item>

        <a href="/login" class="goReg">返回登入</a>
      </div>
    </el-form>
  </div>
</template>

<style scoped>
@import url("/src/assets/style/register/regsiter.scss");
</style>
